<template>
	<div class="pagination-container">
		<el-pagination
			layout="prev, pager, next"
			:total="1000"
			class="pagination-container-el"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			@change="handleChange"
		/>
	</div>
</template>
<script setup>
	defineProps({
		// 总页数
		total: {
			type: Number,
			default: 0,
		},
		// 每页显示条数
		'page-size': {
			type: Number,
			default: 10,
		},
		// 当前页码
		'current-page': {
			type: Number,
			default: 1,
		},
	});
	const emits = defineEmits(['update:current-page', 'update:page-size', 'update:change']);
	function handleSizeChange(...args) {
		emits('update:page-size', ...args);
	}
	function handleCurrentChange(...args) {
		emits('update:current-page', ...args);
	}
	function handleChange(...args) {
		emits('update:change', ...args);
	}
</script>

<style scoped lang="scss">
	.pagination-container {
		.pagination-container-el {
			/* background: red; */
			&:deep(.btn-prev) {
				color: #000000;
				font-weight: bold;
			}
			&:deep(.is-active) {
				width: 32px;
				height: 32px;
				color: white;
				background-color: #022559;
				border-radius: 4px;
			}
			&:deep(.el-pager) {
				@include font(_, 14px, 28px, 700, #000000);
			}
		}
	}
	.pagination-container + .pagination-container {
		margin-top: 10px;
	}
	.pagination-container .pagination-container-el {
		margin-bottom: 16px;
	}
</style>
